<template>
	<view class="clinical">
		<view class="clinical-box">
			<view class="box-header">
				<view class="header-left">
					<view class="left-line"></view>
					<text>体温检测 </text>
				</view>
			</view>
			<view class="box-form">
				<view class="form-left">患病发热</view>
				<view class="form-right" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="right-input-box">
						第
						<view class="input-box-style">
							<u--input  border="none" inputAlign="center" size="mini" fontSize="22rpx" type="number"
								v-model="obj.dayNum"></u--input>
						</view>
						天
					</view>
				</view>
			</view>
			<view class="box-text">
				注:发热及治疗期间每天24小时连续动态监测体温变化，至少每2个小时就量一次体温，并注意高热时是否有寒战情况，以及足跟等表现；
			</view>
			<view class="box-form">
				<view class="form-left">
					日期:
				</view>
				<view class="form-right">
					<uni-datetime-picker type="date" :value="obj.checkTime" start="1990-01-01" :end="currentTime"
						@change="changeDate" />
				</view>
			</view>
			<view class="box-form">
				<view class="form-left">
					时间(24小时制):
				</view>
				<view class="form-right">
					<view class="input-box-style">
						<view class="right-input-box" style="width: 100%;" >
							<view class="input-box-style" style="width: 100%;margin: 0;"   @click="show = true">
								<u-input border="none" size="mini"  placeholder="请选择时间" fontSize="22rpx" readonly style="pointer-events:none"
									v-model="obj.checkTimeHour" >
									<template slot="suffix">
										<u-icon name="arrow-down" @click="show = true"></u-icon>
									</template>
									</u-input>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box-form">
				<view class="form-left">
					体温:
				</view>
				<view class="form-right">
					<view class="input-box-style">
						<view class="right-input-box" style="width: 100%;">
							<view class="input-box-style" style="width: 100%;margin: 0;">
								<u--input border="none" size="mini" placeholder="请输入体温" fontSize="22rpx" type="digit"
									v-model="obj.temperatureNum"></u--input>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box-form">
				<view class="form-left">
					发热时是否咳嗽:
				</view>
				<view class="form-right">
					<u-radio-group v-model="obj.coughStatus">
						<u-radio activeColor="#54b6ab" labelSize="22rpx" :name="1" label="是"
							style="margin-right: 20rpx;"></u-radio>
						<u-radio activeColor="#54b6ab" labelSize="22rpx" :name="0" label="否"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="box-text" style="color: red;">
				*多次体温记录请提交后再次填写
			</view>
			<view class="box-text">
				<u-button type="primary" text="提交" v-if="!setId||setId==null" color="#ffb049" @click="addRecord"></u-button>
				<u-button type="primary" text="提交" v-else color="#ffb049" @click="recordTemperature"></u-button>
			</view>
			<view class="box-text">
				国内外文献证明，水银温度计容易引起儿童铅中毒，因此需谨慎，使用电子体温计进行儿童体温采集
			</view>
			<view class="box-header">
				<view class="header-left" @click="toDocu">
					查看文献证明
				</view>
				<view style="display: flex;color: #2979ff;margin-bottom: 20rpx;" @click="showNaoZhong">
					<u-icon name="clock-fill" color="#2979ff"></u-icon>设置闹钟
				</view>
			</view>
			<view class="box-form">
				<view class="form-left">
					添加电子体温计:
				</view>
				<view class="form-right" style="display: flex;align-items: flex-start;justify-content: space-between;" @click="not">
					<!-- <u-upload :fileList="form.electronicTemperatureUrlArr" @afterRead="afterRead" @delete="deletePic" uploadIconColor="#54b6ab" uploadIcon="plus" name="1"
						:maxCount="1"></u-upload> -->
						
						<u-upload  disabled uploadIconColor="#54b6ab" uploadIcon="plus" name="1"
							:maxCount="1"></u-upload>
						
					<text class="media-text" style="color: #2979ff;">演示实例</text>
				</view>
			</view>
		</view>

		<view class="clinical-tab">
			<view class="tab-header">
				<text class="text-box1">时间点</text>
				<text class="text-box1">体温(℃)</text>
				<text class="text-box1">是否咳嗽</text>
			</view>
			<view class="tab-header" style="background-color: #fff;color: #333;"
				v-if="form.temperatureCheckArr&&form.temperatureCheckArr.length>0"
				v-for="(item,index) in form.temperatureCheckArr" :key="index">
				<text class="text-box1">{{item.checkTime}} {{item.checkTimeHour}}</text>
				<text class="text-box1">{{item.temperatureNum}}℃</text>
				<text class="text-box1">{{item.coughStatus===1?'是':'否'}}</text>
			</view>

			<view style="background-color: #fff;color: #333;display: flex;justify-content: center;"
				v-if="!form.temperatureCheckArr||form.temperatureCheckArr.length==0">
				<u-empty mode="list" width="50" height="50" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>

		</view>
		<view style="width: 100%;height: 300px;" v-if="form.temperatureCheckArr&&form.temperatureCheckArr.length>0">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :reshow="navClick=== 2" :ontouch="true" />
		</view>
		<view class="clinical-box" style="padding: 0;background-color: transparent;">
			<!-- 组件底部按钮 -->
			<view class="clinical-box" style="background-color: transparent;" v-if="!setId||setId==null">
				<view class="foot-btns">
					<u-button type="primary" text="上一步" color="#54b6ab" @click="nextStep(1)"
						style="width: 30%;"></u-button>
					<u-button type="primary" text="下一步" color="#54b6ab" @click="nextStep(3)"
						style="width: 30%;"></u-button>
					<u-button type="primary" color="#ffb049" text="保存" style="width: 30%;" @click="save"></u-button>
				</view>
			</view>

		</view>

		<u-datetime-picker ref="datetimePicker" :show="show" v-model="obj.checkTimeHour" mode="time" @confirm="confirm"
			@cancel="show = false"></u-datetime-picker>
			
			
		<u-popup :show="show2" mode="center" @close="close" :closeOnClickOverlay="false" bgColor="transparent">
			<view class="dialog">
				<view class="dialog-title">
					<text>闹钟设置</text>
					<u-icon name="close" @click="show2 = false"></u-icon>
				</view>
				<view class="dialog-form">
					<u--form labelPosition="left" :labelStyle="{color:'#666',fontSize:'18rpx'}" :model="waitDo"
						ref="uForm">
						<u-form-item label="事项名称:" labelWidth="80">
							<u--input border="none" v-model="waitDo.name" placeholder="输入事项名称"></u--input>
						</u-form-item>
						<u-form-item label="日期时间:" labelWidth="80">
							<uni-datetime-picker type="datetime"  :start="currentTime" v-model="waitDo.dateTime"
								end="2990-01-01" @change="changeDate" />
						</u-form-item>
						<u-form-item label="闹钟频率:" labelWidth="80" @click="showClock = true">
							<view @click="showClock = true">
								<u--input border="none"  v-model="waitDo.frequency"  readonly style="pointer-events:none"
									placeholder="请选择"></u--input>
							</view>
						</u-form-item>
						<u-form-item label="描述:" labelWidth="80">
							<u--input border="none"  placeholder="输入内容" v-model="waitDo.descContent"></u--input>
						</u-form-item>
		
						<u-button type="primary" shape="circle" color="#54b6ab" text="确 定" @click="submit"></u-button>
					</u--form>
				</view>
			</view>
		
		</u-popup>	
			
			<u-picker :closeOnClickOverlay="true" :show="showClock" :columns="clockColumns" @confirm="confirm2"
				@cancel="showClock = false"></u-picker>
			
	</view>
</template>

<script>
	import global from '../common/global.js'
	export default {
		name: "temperature",

		props: ['info', "clientId", "doctorId", "navClick", "setId"],
		data() {
			return {
				clockColumns: [
					['每两小时提醒', '每三小时提醒', '每四小时提醒']
				],
				showClock: false,
				waitDo:{},
				 currentTime:null, //当前日期字符串
				show: false,
				show2:false,
				value: '',
				fileList: [],
				myChart: null,
				form: {
					clientId:null,
					doctorId:null,
					morbidityCondition: 0, //发病情况 0初诊 1复诊
					timesNum: null, //复诊次数 初诊不填 复诊必填
					morbidityTime: null, //发病时间 初诊必填 复诊非必填
					feverDayNum: null, //发热天数
					highTemperature: null, //发热最高温度
					feverSymptom: 0, //发热症状 0无 1有
					symptomDetailArr: [], //发热症状详情
					feverTimeInterval: 0, //发热时间间隔 0持续发热 1间隔
					intervalTimeHour: null, //间隔小时
					feverMedicateStatus: 0, //发热用药 0无 1有
					medicateDetail: null, //用药详情
					heelExampleUrlArr: [], //足跟示例资源地址
					heelExampleType: null, //足跟示例资源类型 0图片 1视频
					heelColor: null, //足跟颜色
					heelTemperature: null, //足跟温度 1温 2凉 3热
					heelPressRedTime: null, //足跟按压变红 0 <=3秒  1>3秒
					heelHardness: null, //足心软硬度 1软(唇) 2韧(鼻) 3硬(额)
					coughDayNum: null, //咳嗽天数
					aggravateDayNum: null, //加重天数
					coughTimesArr: [], //咳嗽时间
					coughRelatedFactor: 0, //咳嗽相关因素0无 1有
					coughFactorDetailArr: [], //咳嗽相关因素详情
					coughVomitStatus: 0, //咳嗽呕吐 0无 1有
					coughAwakeningStatus: 0, //夜里咳醒 0无 1有
					feverCoughStatus: 0, //发热咳嗽 0无 1有
					coughPeculiarityArr: [], //咳嗽特点
					coughRecordedUrl: null, //咳嗽录音 可上床多条 用,隔开
					coughRecordedUrlArr: [], //咳嗽录音数组
					gaspStatus: 0, //喘息 0无 1有
					gaspDayNum: null, //喘息天数
					sneezeStatus: 0, //喷嚏 0无 1有
					sneezeDayNum: null, //喷嚏天数
					nasalObstructionStatus: 0, //鼻塞 0无 1有
					nasalObstructionDayNum: null, //鼻塞天数
					anginaStatus: 0, //咽痛 0无 1有
					anginaDayNum: null, //咽痛天数
					dullStatus: 0, //暗哑 0无 1有
					dullDegree: 1, //暗哑程度 1轻 2中 3重
					gaspBreathVideoUrlArr: [], //喘息或呼吸困难视频示例地址
					electronicStethoscopeUrlArr: [], //电子听诊器呼吸音地址
					kneadNoseEye: 0, //手揉鼻子眼睛 0无 1有
					eczemaStatus: 0, //幼时湿疹 0无 1有
					eczemaDegree: 1, //湿疹程度 1轻 2中 3重
					allergyRhinitis: 0, //过敏性鼻炎 0无 1有
					parentAllergyRhinitis: 0, //父母过敏性鼻炎 0无 1有
					allergySource: 0, //过敏原 0无 1有
					allergySourceDetail: null, //过敏原详情
					penicillinCephalosporinAllergy: 0, //青霉素/头孢过敏史 0无 1有
					otherAllergyMedicineDetail: null, //其他过敏药物
					foodAllergyMedicineDetail: null, //食物过敏详情
					recentRash: 0, //近两天皮疹 0无 1有
					lowerPartRash: 0, //下面部位皮疹 0无 1有
					lowerPartRashDetailArr: [], //下面部位皮疹详情
					rashShowType: null, //皮疹展示 0图片 1视频
					rashShowUrlArr: [], //皮疹展示资源地址
					otherExpression: 0, //有无下列表现 0无 1有
					otherExpressionDetailArr: [], //有下列表现详情
					otherIllness: 1, //其他疾病
					otherIllnessDetail: null, //其他疾病详情
					temperatureCheckArr: [],
					electronicTemperatureUrlArr:[],
					physicalAssayImageArr: [], //血常规详情
					physicalUrineReportArr: [], //尿常规详情
					chestRadiograph: 0, //是否有胸片
					chestRadiographArr: [], //胸片详情
					lungCt: 0, //是否有肺部CT
					lungCtArr: [], //肺部CT详情
					carbonMonoxideArr: [], //一氧化碳检测详情
					lungFeature: 0, //是否有肺功能
					lungFeatureArr: [], //肺功能检测详情
					bronchus: 0, //是否有支气管检查
					bronchusArr: [], //支气管检查详情
					illDayNum: null,
					takeOrallyArr: [],
					intravenousDripArr: [],
					atomizationArr: [],
					otherMedicalHistoryArr: [] //图片和pdf都支持
				},
				obj: {
					dayNum: null,
					checkTime: null,
					temperatureNum: null,
					coughStatus: null,
					checkTimeHour: null
				},
				chartData: {},
				opts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: true,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: true,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 13,
						lineHeight: 20,
						marginTop: 0,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 6,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: []
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow",
							linearType: "none",
							onShadow: false,
							animation: "vertical"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 13,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						},
						nameList: [],
						valueList: []
					}
				}

			};
		},
		created() {
			this.currentTime = this.getNowFormatDate()
		},
		watch: {
			// info(item1, item2) {
			// 	this.form = item1
			// 	if (!this.form.temperatureCheckArr) {
			// 		this.form.temperatureCheckArr = []
			// 	} else {
			// 		this.nameList = []
			// 		this.valueList = []
			// 		for (var i = 0; i < this.form.temperatureCheckArr.length; i++) {
			// 			this.nameList.push(this.form.temperatureCheckArr[i].checkTimeHour)
			// 			this.valueList.push(this.form.temperatureCheckArr[i].temperatureNum)
			// 		}
			// 		this.getServerData();
			// 	}
			// }
			
			"$store.state.form": {
				handler(newVal, oldVal) {
					this.form = newVal
					if (!this.form.temperatureCheckArr) {
						this.form.temperatureCheckArr = []
					} else {
						this.nameList = []
						this.valueList = []
						for (var i = 0; i < this.form.temperatureCheckArr.length; i++) {
							this.nameList.push(this.form.temperatureCheckArr[i].checkTimeHour)
							this.valueList.push(this.form.temperatureCheckArr[i].temperatureNum)
						}
						this.getServerData();
					}
				},
				immediate: true
				// deep: true
			},
			
		},
		// mounted() {
		// 	this.getServerData();
		// },

		methods: {
			toDocu(){
				uni.navigateTo({
					url:'/pages/docu'
				})
			},
			async submit(){
				if(!this.waitDo.name){
					return uni.showToast({
						icon:'none',
						title:'请输入事项名称'
					})
				}
				if(!this.waitDo.dateTime){
					return uni.showToast({
						icon:'none',
						title:'请选择日期时间'
					})
				}
				if(!this.waitDo.frequency){
					return uni.showToast({
						icon:'none',
						title:'请选择闹钟频率'
					})
				} else {
					if(this.waitDo.frequency=='每两小时提醒'){
						this.waitDo.frequency=2
					} else if(this.waitDo.frequency=='每三小时提醒'){
						this.waitDo.frequency=3
					} else {
						this.waitDo.frequency=4
					}
				}
				if(!this.waitDo.descContent){
					return uni.showToast({
						icon:'none',
						title:'请输入事项描述'
					})
				}
				this.waitDo.recordsId = this.setId
				const{data} = await uni.$http.post('/patient-wait-do/save',this.waitDo)
				if(data.code===200){
					this.show2 = false
					uni.showToast({
						icon:'none',
						title:'设置成功'
					})
				} else {
					this.show2 = false
				}
			},
			//选择频次
			confirm2(val) {
				this.waitDo.frequency = val.value[0]
				this.showClock = false
			},
			//关闭弹窗
			close() {
				this.show = false
			},
			async showNaoZhong(){
				const{data} = await uni.$http.post('/patient-wait-do/findByRecordId?id='+this.setId)
				if(data.code===200){
					this.waitDo = data.data
					if(this.waitDo){
						if(this.waitDo.frequency==='2'){
							this.waitDo.frequency = '每二小时提醒'
						} else if(this.waitDo.frequency===3){
							this.waitDo.frequency = '每三小时提醒'
						} else {
							this.waitDo.frequency = '每四小时提醒'
						}
					} else {
						this.waitDo = {}
					}
					
					this.show2 = true
				}
			},
			not(){
				uni.showToast({
					icon:'none',
					title:'该功能暂未开放'
				})
			},
			getNowFormatDate() {
			  let date = new Date(),
			    year = date.getFullYear(), //获取完整的年份(4位)
			    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
			    strDate = date.getDate() // 获取当前日(1-31)
			  if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
			  if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
			 
			  return `${year}-${month}-${strDate}`
			},
			changeValid1(val){
				const reg = /^\d+$/
				if(!reg.test(this.obj.dayNum)){
					return uni.showToast({
						icon:'none',
						title:'请输入有效天数'
					})
				}
				
			},
			changeValid2(val){
				if(this.obj.temperatureNum>41||this.obj.temperatureNum<36){
					return uni.showToast({
						icon:'none',
						title:'请输入有效体温'
					})
				}
			},
			async recordTemperature() {
				if (this.obj.dayNum) {
					const reg = /^\d+$/
					if(!reg.test(this.obj.dayNum)){
						return uni.showToast({
							icon:'none',
							title:'请输入有效天数'
						})
					}
				} 
				if (!this.obj.checkTime) {
					return uni.showToast({
						icon: 'none',
						title: '请输入检测日期'
					})
				}
				if (!this.obj.temperatureNum) {
					return uni.showToast({
						icon: 'none',
						title: '请输入体温'
					})
				} else {
					if(this.obj.temperatureNum<36||this.obj.temperatureNum>41){
						return uni.showToast({
							icon: 'none',
							title: '请输入有效体温'
						})
					}
				}
				if (!this.obj.coughStatus && this.obj.coughStatus != 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择是否咳嗽'
					})
				}

				const {
					data
				} = await uni.$http.post('/patient-temperatureMonitor/recordTemperature/' + this.setId, this.obj)
				if (data.code === 200) {

					this.form.temperatureCheckArr.push(this.obj)
					this.nameList = []
					this.valueList = []
					for (var i = 0; i < this.form.temperatureCheckArr.length; i++) {
						this.nameList.push(this.form.temperatureCheckArr[i].checkTimeHour)
						this.valueList.push(this.form.temperatureCheckArr[i].temperatureNum)
					}
					this.getServerData();
					this.obj = {}

					uni.showToast({
						icon: 'none',
						title: data.message
					})
				}


			},
			//选择时间
			confirm(e) {
				this.obj.checkTimeHour = e.value
				this.show = false
			},
			//保存
			async save() {
				// this.form.doctorId = this.doctorId
				// this.form.clientId = this.clientId

				const {
					data
				} = await uni.$http.post('/patient-interrogationRecords/saveTemperatureCheck', this.form)
				if (data.code === 200) {
					uni.showToast({
						icon: 'none',
						title: data.message
					})

				}
			},
			//提交检测
			addRecord() {
				if (this.obj.dayNum) {
					const reg = /^\d+$/
					if(!reg.test(this.obj.dayNum)){
						return uni.showToast({
							icon:'none',
							title:'请输入有效天数'
						})
					}
				} 
				if (!this.obj.checkTime) {
					return uni.showToast({
						icon: 'none',
						title: '请输入检测日期'
					})
				}
				if (!this.obj.temperatureNum) {
					return uni.showToast({
						icon: 'none',
						title: '请输入体温'
					})
				} else {
					if(this.obj.temperatureNum<36||this.obj.temperatureNum>41){
						return uni.showToast({
							icon: 'none',
							title: '请输入有效体温'
						})
					}
				}
				if (!this.obj.coughStatus && this.obj.coughStatus != 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择是否咳嗽'
					})
				}
				this.form.temperatureCheckArr.push(this.obj)
				this.nameList = []
				this.valueList = []
				for (var i = 0; i < this.form.temperatureCheckArr.length; i++) {
					this.nameList.push(this.form.temperatureCheckArr[i].checkTimeHour)
					this.valueList.push(this.form.temperatureCheckArr[i].temperatureNum)
				}
				this.getServerData();
				this.obj = {}

			},
			//选择日期
			changeDate(e) {
				this.obj.checkTime = e;
			},
			//上下一步
			nextStep(val) {
				this.$emit('nextStep', val)
			},
			getServerData() {
				//模拟从服务器获取数据时的延时

				let res = {
					categories: this.nameList,
					series: [{
							name:'体温',
							data: this.valueList
						},

					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));

			},

			deletePic(event) {
				this.form.electronicTemperatureUrlArr.splice(event.index, 1)
			},
			async afterRead(file, lists, name) {
				uni.showLoading({
					title: '上传中',
				})
				let a = uni.uploadFile({
					url: global.api + '/system/uploadFile', // 仅为示例，非真实的接口地址
					filePath: file.file.url,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						let result = JSON.parse(res.data)
						if (result.code === 200) {
							let obj = {}
							obj.url = result.data
							this.form.electronicTemperatureUrlArr.push(obj)

							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	// @import url('@/static/css/components.css');
	.clinical {
		width: 100%;
		height: 100%;
		overflow: auto;

		.clinical-box {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.box-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.header-left {
					display: flex;
					align-items: stretch;
					color: #54b6ab;

					.left-line {
						width: 10rpx;
						background-color: #54b6ab;
						margin-right: 10rpx;
					}
				}
			}

			.box-form {
				box-sizing: border-box;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.form-left {
					width: 30%;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
				}

				.form-right {
					width: 70%;

					/deep/.uni-input-placeholder {
						font-size: 20rpx;
					}

					.right-input-box {
						display: flex;
						align-items: center;

						.input-box-style {
							padding-left: 10rpx;
							width: 80rpx;
							background-color: #f2f2f2;
							border-radius: 10rpx;
							margin: 0 10rpx;
							box-sizing: border-box;
						}
					}

					.video-btn {
						padding: 10rpx 20rpx;
						box-sizing: border-box;
						border: 1rpx solid #54b6ab;
						color: #54b6ab;
						display: flex;
						border-radius: 10rpx;
					}

					.media-text {
						color: #54b6ab;
					}

					.foot-color {
						position: relative;
						width: 49%;
						height: 70rpx;
						background-color: #d9d9d9;
						margin-bottom: 10rpx;
						box-sizing: border-box;
					}

					.text-btn {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: space-between;
						color: #6897ff;
					}

					.footActive {
						border: 2rpx solid #54b6ab;
					}

					/deep/.uni-date__x-input {
						background-color: #f2f2f2;
						padding-left: 10rpx;
						border-radius: 10rpx;
					}

					/deep/.u-checkbox-group--row {
						flex-wrap: wrap;
					}
				}
			}

			.foot-btns {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			.box-text {
				width: 100%;
				margin-bottom: 20rpx;
			}
		}

		.clinical-tab {
			width: 100%;
			margin-bottom: 20rpx;

			.tab-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #54b6ab;
				color: #fff;
				padding: 20rpx 0;
				box-sizing: border-box;

				.text-box1 {
					display: flex;
					width: 33%;
					align-items: center;
					justify-content: center;
				}

			}
		}

.dialog {
			width: 80vw;
			margin: 0 auto;
			// padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			box-sizing: border-box;

			.dialog-title {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;
			}

			.dialog-form {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;

				/deep/.u-input__content__field-wrapper__field {
					font-size: 18rpx !important;
				}
			}
		}

	}
</style>